টেম্পলেট এবং ডিরেক্টিভস

Angular অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ হলো টেম্পলেট এবং ডিরেক্টিভস। টেম্পলেট হলো সেই অংশ যেখানে HTML ব্যবহার করে UI ডিজাইন করা হয়, এবং ডিরেক্টিভস হল Angular এর বিশেষ ক্লাস যা HTML-এর আচরণ এবং গঠন পরিবর্তন করে। এই দুটি একসঙ্গে ব্যবহৃত হয়ে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করে।

টেম্পলেট কী?

টেম্পলেট হলো Angular কম্পোনেন্টের HTML ভিউ বা UI অংশ। এটি সাধারণ HTML কোডের মতোই হয়, তবে Angular-এর বিশেষ বৈশিষ্ট্য যেমন ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং ডিরেক্টিভস ব্যবহৃত হয়। টেম্পলেটের মাধ্যমে ডেটা উপস্থাপন করা হয় এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন ঘটানো হয়।

Angular টেম্পলেটের মধ্যে সাধারণত HTML, CSS এবং Angular এর বিশেষ ডেটা বাইন্ডিং পদ্ধতিগুলি ব্যবহৃত হয়। এর মাধ্যমে কম্পোনেন্টের ডেটা UI তে দেখা যায় এবং ইউজারের ইনপুট গ্রহণ করা হয়।

টেম্পলেট উদাহরণ:

<div>
  <h1>{{ title }}</h1>
  <button (click)="changeTitle()">Change Title</button>
</div>

এখানে:

• {{ title }} হলো Interpolation যা কম্পোনেন্টের title ভেরিয়েবলটি টেম্পলেটে প্রদর্শন করে।
• (click)="changeTitle()" হলো Event Binding, যা ব্যবহারকারীর ক্লিক ইভেন্টে changeTitle() মেথডটি কল করবে।

ডিরেক্টিভস কী?

ডিরেক্টিভস হলো Angular-এর বিশেষ ক্লাস যা DOM (Document Object Model)-এর আচরণ এবং গঠন পরিবর্তন করে। Angular-এ তিন ধরনের ডিরেক্টিভস ব্যবহৃত হয়:

1. Structural Directives
2. Attribute Directives
3. Custom Directives

1. Structural Directives

Structural Directives DOM-এর স্ট্রাকচার পরিবর্তন করে, যেমন এলিমেন্ট যোগ বা সরানো। এগুলি সাধারণত * চিহ্ন দিয়ে শুরু হয়।

• ngIf: শর্তসাপেক্ষে এলিমেন্ট প্রদর্শন বা লুকানো

  <div *ngIf="isVisible">This content is visible</div>
  

  এখানে, isVisible যদি true হয়, তাহলে div এলিমেন্টটি প্রদর্শিত হবে, নতুবা লুকানো থাকবে।

• ngFor: লিস্ট বা অ্যারে পুনরাবৃত্তি করে এলিমেন্ট তৈরি করা

  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  

  এখানে, items হলো একটি অ্যারে, এবং *ngFor প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট তৈরি করবে।

• ngSwitch: একাধিক শর্তের ভিত্তিতে এলিমেন্টের প্রদর্শন নির্ধারণ করা

  <div [ngSwitch]="value">
    <p *ngSwitchCase="'a'">A</p>
    <p *ngSwitchCase="'b'">B</p>
    <p *ngSwitchDefault>Default</p>
  </div>
  

2. Attribute Directives

Attribute Directives কোনো HTML এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করে। এগুলি অ্যাট্রিবিউটের মাধ্যমে ব্যবহার করা হয়।

• ngClass: এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করা

  <div [ngClass]="{ 'highlight': isHighlighted }">This is highlighted</div>
  

  এখানে, যদি isHighlighted true হয়, তাহলে highlight ক্লাসটি এলিমেন্টে যোগ করা হবে।

• ngStyle: এলিমেন্টের স্টাইল পরিবর্তন করা

  <div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
  

• ngModel: Two-way data binding এর জন্য ব্যবহৃত হয়

  <input [(ngModel)]="name">
  

  এখানে, name প্রোপার্টি এবং ইনপুট ফিল্ডের মান একে অপরের সাথে সিঙ্ক্রোনাইজ হবে।

3. Custom Directives

Angular-এ আপনি নিজের Custom Directives তৈরি করতে পারেন, যা কাস্টম DOM আচরণ প্রদান করে। এটি সাধারণত বিশেষ প্রয়োজনে ব্যবহৃত হয়, যেমন কাস্টম ইফেক্ট, ফর্ম ভ্যালিডেশন বা ইউআই কন্ট্রোল।

Custom Directive তৈরি করতে:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

এখানে appHighlight হলো কাস্টম ডিরেক্টিভ যা কোনো এলিমেন্টে অ্যাপ্লাই করা হলে তার ব্যাকগ্রাউন্ড কালার হলুদ হয়ে যাবে।

টেম্পলেট এবং ডিরেক্টিভসের সংযোগ

Angular টেম্পলেট এবং ডিরেক্টিভস একে অপরের সাথে মিলে কাজ করে। ডেটা বাইন্ডিং (যেমন {{ }}) এবং ডিরেক্টিভস (যেমন *ngFor, *ngIf) Angular অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে সাহায্য করে। এই উপাদানগুলি কম্পোনেন্টের ডেটার সাথে যুক্ত থাকে এবং UI-তে তা প্রদর্শন বা পরিবর্তন ঘটায়।

সারাংশ

Angular টেম্পলেট এবং ডিরেক্টিভসের মাধ্যমে আমরা কম্পোনেন্টের UI তৈরি করি এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন ঘটাই। টেম্পলেট HTML কোডের মতো থাকে, তবে Angular-এর ডেটা বাইন্ডিং এবং ডিরেক্টিভসের মাধ্যমে তা আরো ডাইনামিক হয়ে ওঠে। ডিরেক্টিভস Angular এর শক্তিশালী ফিচার যা DOM-এর আচরণ পরিবর্তন করে এবং UI কে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

Angular এর টেম্পলেট সিনট্যাক্স HTML এবং Angular এর ডেটা বাইন্ডিং, ডিরেক্টিভস, এবং ইভেন্ট হ্যান্ডলিং সুবিধাগুলি সংযুক্ত করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে ব্যবহৃত হয়। Angular টেম্পলেটে ডেটা বাইন্ডিং এবং ডিরেক্টিভস এর মাধ্যমে UI তৈরি এবং কম্পোনেন্টের মধ্যে ডেটা আদান প্রদান করা হয়। এখানে Angular এর টেম্পলেট সিনট্যাক্সের বিভিন্ন বৈশিষ্ট্য এবং তাদের ব্যবহার আলোচনা করা হবে।

১. ডেটা বাইন্ডিং (Data Binding)

Angular টেম্পলেটে ডেটা বাইন্ডিং বিভিন্ন উপায়ে কাজ করে, যেখানে কম্পোনেন্টের ডেটা এবং UI এর মধ্যে একে অপরকে সিঙ্ক্রোনাইজ করা হয়। Angular চার ধরনের ডেটা বাইন্ডিং সাপোর্ট করে:

১.১. Interpolation ({{ }})

Interpolation বা এক্সপ্রেশন বাইন্ডিং এর মাধ্যমে কম্পোনেন্টের প্রপার্টির মান HTML টেম্পলেটের মধ্যে সন্নিবেশ করা হয়।

<h1>{{ title }}</h1>

এখানে, title কম্পোনেন্টের একটি প্রপার্টি এবং তার মান h1 ট্যাগে প্রদর্শিত হবে।

১.২. Property Binding ([ ])

Property Binding এর মাধ্যমে HTML এলিমেন্টের প্রপার্টি (যেমন src, href, disabled ইত্যাদি) কম্পোনেন্টের প্রপার্টির মান দ্বারা সেট করা হয়।

<img [src]="imageUrl">

এখানে, [src] এর মাধ্যমে imageUrl কম্পোনেন্টের প্রপার্টির মান img ট্যাগের src অ্যাট্রিবিউটে দেওয়া হবে।

১.৩. Event Binding (( ))

Event Binding এর মাধ্যমে একটি ইভেন্ট (যেমন click, mouseenter, ইত্যাদি) কম্পোনেন্টের একটি মেথড বা ফাংশনের সাথে যুক্ত করা হয়।

<button (click)="onClick()">Click Me</button>

এখানে, (click) ব্যবহারকারী ক্লিক করার সাথে onClick() মেথডটি ট্রিগার হবে।

১.৪. Two-Way Data Binding ([( )])

Two-Way Data Binding এর মাধ্যমে কম্পোনেন্টের প্রপার্টি এবং UI এর মধ্যে একে অপরের মান সিঙ্ক্রোনাইজ করা যায়।

<input [(ngModel)]="name">

এখানে, [(ngModel)] ইনপুট ফিল্ডে পরিবর্তন হলে তা কম্পোনেন্টের name প্রপার্টিতে আপডেট হবে এবং বিপরীতভাবে।

২. ডিরেক্টিভস (Directives)

ডিরেক্টিভস হলো Angular এর শক্তিশালী বৈশিষ্ট্য যা HTML এলিমেন্টের আচরণ বা স্ট্রাকচার পরিবর্তন করে। Angular এ তিন ধরনের ডিরেক্টিভ ব্যবহৃত হয়: Structural Directives, Attribute Directives, এবং Component Directives।

২.১. Structural Directives

Structural directives HTML এর DOM স্ট্রাকচার পরিবর্তন করে। এগুলি * দিয়ে শুরু হয়।

• ngIf: শর্তসাপেক্ষভাবে একটি এলিমেন্টকে DOM-এ যোগ বা বাদ দেয়।

  <div *ngIf="isVisible">Content is visible</div>
  

• ngFor: একটি লিস্ট বা অ্যারে থেকে DOM-এ একাধিক এলিমেন্ট তৈরি করে।

  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  

• ngSwitch: একাধিক শর্ত পরীক্ষা করে এবং নির্দিষ্ট শর্তের ভিত্তিতে ভিন্ন ভিন্ন উপাদান প্রদর্শন করে।

  <div [ngSwitch]="color">
    <div *ngSwitchCase="'red'">Red</div>
    <div *ngSwitchCase="'green'">Green</div>
    <div *ngSwitchDefault>Default Color</div>
  </div>
  

২.২. Attribute Directives

Attribute Directives এলিমেন্টের প্রোপার্টি বা আচরণ পরিবর্তন করে। সাধারণত, এই ডিরেক্টিভগুলো এলিমেন্টের অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়।

• ngClass: ক্লাস অ্যাট্রিবিউট পরিবর্তন করে।

  <div [ngClass]="{ 'highlight': isHighlighted }">Highlighted text</div>
  

• ngStyle: ইনলাইন স্টাইল পরিবর্তন করে।

  <div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
  

• ngModel: টু-ওয়ে ডেটা বাইন্ডিং এর জন্য ব্যবহৃত হয়, যা UI এবং কম্পোনেন্টের প্রপার্টি একে অপরের সাথে সিঙ্ক্রোনাইজ করে।

  <input [(ngModel)]="username">
  

৩. পিপস (Pipes)

Pipes Angular এ ডেটাকে একটি নির্দিষ্ট ফরম্যাটে পরিবর্তন করার জন্য ব্যবহৃত হয়। এটি ডেটা ট্রান্সফরমেশন এর জন্য খুবই কার্যকর।

৩.১. Predefined Pipes

Angular অনেকগুলি প্রি-ডিফাইনড পিপ সরবরাহ করে:

• Date Pipe: ডেটা ফরম্যাটিং এর জন্য।

  <p>{{ today | date:'short' }}</p>
  

• Currency Pipe: একটি মানকে কারেন্সি ফরম্যাটে পরিবর্তন করে।

  <p>{{ price | currency }}</p>
  

• UpperCasePipe: টেক্সটকে বড় অক্ষরে পরিবর্তন করে।

  <p>{{ message | uppercase }}</p>
  

৩.২. Custom Pipes

Angular আপনাকে কাস্টম পিপ তৈরির অনুমতি দেয় যা নির্দিষ্ট ডেটা ফরম্যাটে রূপান্তরিত করে।

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

এবং HTML টেম্পলেটে:

<p>{{ 'Angular' | reverse }}</p>

৪. ডিরেক্টিভস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস

Angular টেম্পলেটে ডিরেক্টিভস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস ব্যবহার করে DOM এলিমেন্টের উপর কাজ করা যায়। আপনি # চিহ্ন ব্যবহার করে HTML এলিমেন্টকে একটি ভেরিয়েবল হিসাবে উল্লেখ করতে পারেন।

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Value</button>

এখানে, #myInput একটি টেম্পলেট রেফারেন্স ভেরিয়েবল, যা ইনপুট ফিল্ডের মান সংগ্রহ করতে ব্যবহৃত হয়।

সারাংশ

Angular টেম্পলেট সিনট্যাক্সের মাধ্যমে আপনি কম্পোনেন্টের ডেটা বাইন্ডিং, ডিরেক্টিভস, পিপস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস ব্যবহার করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে পারেন। এটি Angular অ্যাপ্লিকেশনের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

স্ট্রাকচারাল ডিরেক্টিভস Angular এর এমন ধরনের ডিরেক্টিভ যা DOM-এর কাঠামো পরিবর্তন করে, যেমন কোনো এলিমেন্ট যুক্ত করা, সরানো বা দেখানো। এই ডিরেক্টিভগুলি সাধারণত * চিহ্ন দিয়ে শুরু হয়। স্ট্রাকচারাল ডিরেক্টিভস Angular অ্যাপ্লিকেশনে ডাইনামিক কনটেন্ট রেন্ডার করতে সাহায্য করে। সবচেয়ে বেশি ব্যবহৃত স্ট্রাকচারাল ডিরেক্টিভস হলো ngIf, ngFor, এবং ngSwitch।

1. ngIf

ngIf ডিরেক্টিভটি একটি শর্তের ভিত্তিতে DOM-এ কোনো এলিমেন্ট প্রদর্শন বা অদৃশ্য করে। এটি ব্যবহৃত হয় যখন আপনি কোনো নির্দিষ্ট শর্ত বা এক্সপ্রেশনের উপর ভিত্তি করে কন্টেন্ট দেখাতে চান।

উদাহরণ:

<div *ngIf="isVisible">This content is visible if isVisible is true</div>

এখানে, isVisible যদি true হয়, তাহলে এই div এলিমেন্টটি DOM-এ রেন্ডার হবে। যদি false হয়, তবে এটি DOM থেকে সরিয়ে ফেলা হবে।

ngIf with Else:

আপনি ngIf এর সাথে else ব্যবহারের মাধ্যমে শর্ত না মেটানোর পরিস্থিতিতে অন্য কোনো কন্টেন্টও দেখাতে পারেন।

<div *ngIf="isVisible; else elseBlock">This content is visible if isVisible is true</div>
<ng-template #elseBlock>
  <div>This content is shown if isVisible is false</div>
</ng-template>

এখানে, যদি isVisible false হয়, তবে elseBlock টেমপ্লেটটি রেন্ডার হবে।

2. ngFor

ngFor ডিরেক্টিভটি Angular অ্যাপ্লিকেশনে একটি লিস্ট বা অ্যারের প্রতিটি আইটেমের জন্য একটি HTML এলিমেন্ট রেন্ডার করতে ব্যবহৃত হয়। এটি ব্যবহৃত হয় যখন আপনি একটি অ্যারে বা লিস্ট থেকে ডেটা তুলে এনে তার উপর ভিত্তি করে UI রেন্ডার করতে চান।

উদাহরণ:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

এখানে items একটি অ্যারে বা লিস্ট এবং ngFor ডিরেক্টিভের মাধ্যমে এই লিস্টের প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট তৈরি হবে।

ngFor with Index:

আপনি ngFor-এ লুপের মধ্যে আইটেমের ইনডেক্সও ব্যবহার করতে পারেন:

<ul>
  <li *ngFor="let item of items; let i = index">{{ i + 1 }}. {{ item }}</li>
</ul>

এখানে, index এর মাধ্যমে প্রতিটি আইটেমের ইনডেক্স পাওয়া যাবে এবং তা UI তে দেখানো হবে।

3. ngSwitch

ngSwitch ডিরেক্টিভটি একাধিক শর্ত পরীক্ষা করার জন্য ব্যবহৃত হয় এবং প্রতিটি শর্তের জন্য নির্দিষ্ট কন্টেন্ট দেখায়। এটি switch এবং case এর মতো কাজ করে, যেখানে একটি শর্তের ভিত্তিতে একটি নির্দিষ্ট ব্লক রেন্ডার করা হয়।

উদাহরণ:

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">The color is red</p>
  <p *ngSwitchCase="'blue'">The color is blue</p>
  <p *ngSwitchDefault>The color is unknown</p>
</div>

এখানে, color ভেরিয়েবলের মান অনুযায়ী কন্টেন্ট রেন্ডার হবে:

• যদি color হলো 'red', তবে "The color is red" দেখাবে।
• যদি color হলো 'blue', তবে "The color is blue" দেখাবে।
• অন্য কোন মান হলে, ngSwitchDefault অংশটি রেন্ডার হবে, যা "The color is unknown" দেখাবে।

সারাংশ

Angular এর স্ট্রাকচারাল ডিরেক্টিভস DOM-এ কন্টেন্টের উপস্থিতি নিয়ন্ত্রণ করে। ngIf শর্ত অনুযায়ী কন্টেন্ট দেখানোর বা লুকানোর কাজ করে, ngFor একটি অ্যারে বা লিস্টের প্রতিটি আইটেমের জন্য কন্টেন্ট রেন্ডার করে, এবং ngSwitch একাধিক শর্তের মধ্যে থেকে একটি নির্দিষ্ট কন্টেন্ট প্রদর্শন করে। এই ডিরেক্টিভগুলি Angular অ্যাপ্লিকেশনগুলিতে ডাইনামিক এবং ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরিতে সাহায্য করে।

Angular-এ অ্যাট্রিবিউট ডিরেক্টিভস ব্যবহৃত হয় HTML এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করার জন্য। এই ধরনের ডিরেক্টিভস, যেমন ngClass এবং ngStyle, কোন HTML অ্যাট্রিবিউট পরিবর্তন করে এবং এর মাধ্যমে UI কে ডায়নামিকভাবে কাস্টমাইজ করা যায়।

ngClass

ngClass ডিরেক্টিভটি একটি HTML এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি একাধিক ক্লাস অ্যাড বা রিমুভ করতে পারেন, অথবা কোনো শর্তের ভিত্তিতে ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে পারেন।

ব্যবহার

ngClass সাধারণত একটি অবজেক্ট, অ্যারে, বা স্ট্রিং হিসেবে কাজ করে। শর্তসাপেক্ষে এক বা একাধিক CSS ক্লাস অ্যাড করতে পারবেন।

উদাহরণ

1. স্ট্রিং ব্যবহার করে:

   <div [ngClass]="'highlight'">This text will be highlighted</div>
   

   এখানে, highlight ক্লাসটি সরাসরি div ট্যাগে অ্যাড করা হবে।

2. অবজেক্ট ব্যবহার করে:

   <div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">Styled text</div>
   

   এখানে, isHighlighted এবং isBold যদি true হয়, তাহলে highlight এবং bold ক্লাসগুলি যোগ করা হবে। false থাকলে তা রিমুভ করা হবে।

3. অ্যারে ব্যবহার করে:

   <div [ngClass]="['highlight', isBold ? 'bold' : '']">Text with dynamic classes</div>
   

   এখানে, highlight ক্লাসটি সব সময় যোগ হবে, এবং isBold যদি true হয়, তাহলে bold ক্লাসটি যোগ হবে।

কোড উদাহরণ:

<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">
  This is a dynamically styled text.
</div>

export class AppComponent {
  isHighlighted = true;
  isBold = false;
}

এই উদাহরণে, highlight ক্লাসটি isHighlighted এর ভিত্তিতে যোগ হবে, এবং bold ক্লাসটি isBold এর ভিত্তিতে যোগ বা রিমুভ হবে।

ngStyle

ngStyle ডিরেক্টিভটি HTML এলিমেন্টের ইনলাইন স্টাইল পরিবর্তন করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি CSS প্রোপার্টি যেমন color, background-color, font-size, ইত্যাদি ডায়নামিকভাবে পরিবর্তন করতে পারেন।

ব্যবহার

ngStyle একটি অবজেক্ট হিসেবে কাজ করে যেখানে CSS প্রোপার্টির নাম এবং তাদের মান নির্ধারণ করা থাকে।

উদাহরণ

1. স্টাইল অবজেক্ট ব্যবহার করে:

   <div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
   

   এখানে, color এবং font-size স্টাইল প্রোপার্টি ডায়নামিকভাবে পরিবর্তিত হবে কম্পোনেন্টের ডেটার উপর ভিত্তি করে।

2. ডাইনামিক স্টাইল পরিবর্তন:

   <div [ngStyle]="{ 'background-color': isActive ? 'green' : 'red' }">
     This div's background color will change based on 'isActive'.
   </div>
   

   এখানে, isActive যদি true হয়, green ব্যাকগ্রাউন্ড রঙ হবে; আর false হলে red হবে।

কোড উদাহরণ:

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">
  This is a styled text.
</div>

export class AppComponent {
  textColor = 'blue';
  fontSize = 20;
}

এখানে, textColor এবং fontSize ডাইনামিকভাবে পরিবর্তিত হবে, এবং স্টাইলের প্রোপার্টি হিসেবে color এবং font-size অ্যাপ্লাই করা হবে।

ngClass এবং ngStyle এর মধ্যে পার্থক্য

• ngClass CSS ক্লাসগুলিকে অ্যাড বা রিমুভ করে, যেটি স্টাইলিংয়ের জন্য ব্যবহৃত হয়। এটি ক্লাসের পরিবর্তন করে তবে প্রপার্টি মান পরিবর্তন করে না।
• ngStyle সরাসরি ইনলাইন CSS প্রোপার্টি মান পরিবর্তন করে, যেমন color, background-color, font-size ইত্যাদি।

উপসংহার

ngClass এবং ngStyle Angular এর শক্তিশালী ডিরেক্টিভস, যা UI-এর স্টাইল এবং ক্লাস ডায়নামিকভাবে পরিচালনা করতে সাহায্য করে। ngClass ব্যবহার করে আপনি শর্তসাপেক্ষে একাধিক ক্লাস অ্যাড বা রিমুভ করতে পারেন, আর ngStyle ব্যবহার করে আপনি সরাসরি স্টাইল প্রোপার্টি নিয়ন্ত্রণ করতে পারেন। এই ডিরেক্টিভস Angular অ্যাপ্লিকেশনে ডাইনামিক ইন্টারফেস তৈরি করার জন্য গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।

Angular ডিরেক্টিভস হলো এমন ক্লাস যা DOM-এ উপাদানের আচরণ পরিবর্তন করতে ব্যবহৃত হয়। Angular-এ তিন ধরনের ডিরেক্টিভ রয়েছে: Structural Directives, Attribute Directives, এবং Component Directives। যেহেতু আমরা কাস্টম ডিরেক্টিভ তৈরি করছি, তাই এটি Attribute Directive হিসেবে কাজ করবে। কাস্টম ডিরেক্টিভ ব্যবহার করে আপনি DOM এলিমেন্টের আচরণ, স্টাইল বা অন্যান্য প্রপার্টি পরিবর্তন করতে পারবেন।

কাস্টম ডিরেক্টিভ তৈরি করার পদ্ধতি

Angular CLI ব্যবহার করে কাস্টম ডিরেক্টিভ তৈরি করা যায়। ডিরেক্টিভ তৈরি করার জন্য, CLI কমান্ডের মাধ্যমে সহজেই ডিরেক্টিভ তৈরি করা যায় এবং এটি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় ফাইল তৈরি করবে।

1. Angular CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করা

CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:

ng generate directive directive-name

অথবা শর্টকাট কমান্ড:

ng g d directive-name

এখানে directive-name হল আপনার ডিরেক্টিভের নাম। উদাহরণস্বরূপ, যদি আপনি একটি ডিরেক্টিভ তৈরি করতে চান যার নাম highlight হবে, তাহলে কমান্ড হবে:

ng g d highlight

এটি তৈরি করবে নিম্নলিখিত ফাইলগুলো:

• highlight.directive.ts (ডিরেক্টিভের লজিক)
• highlight.directive.spec.ts (টেস্ট ফাইল)

কাস্টম ডিরেক্টিভের ফাইল স্ট্রাকচার

Angular CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করার পর, আপনার ডিরেক্টিভের জন্য একটি TypeScript ফাইল তৈরি হবে, যেখানে ডিরেক্টিভের কার্যকারিতা থাকবে। নিচে একটি কাস্টম ডিরেক্টিভের উদাহরণ দেখানো হলো:

highlight.directive.ts

এটি হলো কাস্টম ডিরেক্টিভের TypeScript ফাইল, যেখানে ডিরেক্টিভের কার্যকারিতা সংজ্ঞায়িত করা হয়।

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('transparent');
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

এখানে:

• @Directive ডেকোরেটরটি Angular-কে জানিয়ে দেয় যে এটি একটি কাস্টম ডিরেক্টিভ।
• ElementRef ক্লাসটি DOM-এ অ্যাক্সেস দেয়, যাতে আমরা HTML উপাদানটির উপর কাজ করতে পারি।
• Renderer2 Angular-এর একটি নিরাপদ উপায়, যা DOM-এ স্টাইল বা অন্যান্য পরিবর্তন করতে সাহায্য করে।
• @HostListener ডেকোরেটরটি DOM-এর ইভেন্টের জন্য এক বা একাধিক হ্যান্ডলার নির্ধারণ করে। এখানে, mouseenter এবং mouseleave ইভেন্টগুলোর জন্য হ্যান্ডলার নির্ধারণ করা হয়েছে যা ইউজারের মাউসের গতির উপর ভিত্তি করে কাজ করবে।

কাস্টম ডিরেক্টিভ ব্যবহার করা

এখন, কাস্টম ডিরেক্টিভটি ব্যবহার করার জন্য আপনাকে এটি HTML টেম্পলেটে যোগ করতে হবে। appHighlight ডিরেক্টিভটি [] ব্র্যাকেটের মধ্যে ব্যবহার করতে হবে।

HTML টেম্পলেটে ব্যবহার

<p appHighlight>
  হোভার করলে ব্যাকগ্রাউন্ড রং হলুদ হয়ে যাবে।
</p>

এখানে, appHighlight কাস্টম ডিরেক্টিভটি p ট্যাগের উপর প্রয়োগ করা হয়েছে। যখন আপনি মাউস পয়েন্টার নিয়ে ঐ এলিমেন্টের উপর হোভার করবেন, তখন ব্যাকগ্রাউন্ড কালার পরিবর্তিত হয়ে হলুদ হবে, এবং মাউস সরালে তা স্বাভাবিক অবস্থায় ফিরে যাবে।

কাস্টম ডিরেক্টিভের গুরুত্ব

1. UI আচরণ নিয়ন্ত্রণ: কাস্টম ডিরেক্টিভের মাধ্যমে আপনি DOM এলিমেন্টের আচরণ নিয়ন্ত্রণ করতে পারবেন, যেমন মাউস হোভার করলে স্টাইল পরিবর্তন, ক্লিক করলে কোনো অ্যাকশন নেওয়া ইত্যাদি।
2. কোড পুনঃব্যবহারযোগ্যতা: ডিরেক্টিভ ব্যবহারের মাধ্যমে কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়, কারণ এক জায়গায় একবার কোড লিখে এটি বিভিন্ন অংশে ব্যবহার করা যায়।
3. কাস্টমাইজেশন: Angular আপনাকে কাস্টম ডিরেক্টিভ তৈরি করার মাধ্যমে অ্যাপ্লিকেশনের কার্যকারিতা কাস্টমাইজ করতে দেয়।

সারাংশ

Angular-এ কাস্টম ডিরেক্টিভ তৈরি করা খুবই সহজ এবং CLI-এর মাধ্যমে এটি দ্রুত করা সম্ভব। এটি DOM-এর আচরণ পরিবর্তন করতে সাহায্য করে এবং অ্যাপ্লিকেশনের কার্যকারিতা বাড়াতে ভূমিকা রাখে। ElementRef এবং Renderer2 ব্যবহার করে আপনি সহজেই HTML উপাদানের স্টাইল এবং আচরণ নিয়ন্ত্রণ করতে পারবেন।